<template>
  <BlueBackground :title="'我的收藏'">
    <div class="collect-box">
      <div class="shop-box">
        <div class="item" v-for="v in shopData" :key="v.id">
          <div class="img-box">
            <img :src="v.image_url" alt="" @click="methods.next(v)" />
          </div>
          <p class="pro-name">{{ v.name }}</p>
          <p class="pro-enname">{{ v.enname || v.name }}</p>
          <p class="pro-price">￥{{ v.price }}</p>
          <div
            class="bottom-slot"
            @click="methods.delCollect(v.content_id)"
          ></div>
          <slot name="hot"></slot>
        </div>
      </div>
      <van-empty
        v-if="shopData.length === 0"
        description="你的收藏空空如也，快去收藏吧"
      />
    </div>
  </BlueBackground>
</template>

<script lang="ts" setup>
import { CoffeeModel, GET, postFormData } from '@/api'
import BlueBackground from '@/components/BlueBackground.vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const shopData = ref<(CoffeeModel & { content_id: number })[]>([])
const methods = {
  getCollectData() {
    GET({
      url: '/collect/list'
    })
      .then((res) => {
        shopData.value = res.data.list ?? []
        shopData.value =
          shopData.value?.map((item) => {
            return {
              ...item,
              image_url: import.meta.env.VITE_APP_PROXY_URL + item.image_url
            }
          }) ?? []
      })
      .catch((err) => {
        console.error(err)
      })
  },
  delCollect(pid) {
    postFormData({
      url: '/collect/unlike',
      params: {
        pid
      }
    })
      .then(() => {
        methods.getCollectData()
      })
      .catch(console.error)
  },
  next(v) {
    router.push({ name: 'ShopMes', query: { pid: v.pid } })
  }
}
onMounted(() => {
  methods.getCollectData()
})
</script>

<style lang="less" scoped>
.collect-box {
  padding: 0 20px;
  .shop-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    box-sizing: border-box;
    margin-bottom: 50px;
    overflow: hidden;
    padding: 0;
    border-radius: 10px;
    background-color: '#fff';
    .item {
      width: calc(100% / 3);
      text-align: center;
      padding: 10px 0;
      font-size: 16px;
      margin: 0;
      border-radius: 0;
      background-color: #fff;
      position: relative;
      .pro-enname {
        font-size: 12px;
      }
      p {
        margin: 2px 0;
        text-align: left;
        padding-left: 10%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .img-box {
        width: 80%;
        height: 60px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
        }
      }
      .pro-price {
        color: rgb(12, 52, 186);
        font-weight: bold;
      }
      .bottom-slot {
        width: 20px;
        height: 20px;
        background-image: url(../../assets/images/回收站.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 10px;
        right: 10px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
